<template>
	<view>
		<view class="qiun-columns" v-for="(item,index) in dataList" :key="index">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt" >
				<view class="qiun-title-dot-light" style="text-align: center;">{{item.title}}</view>
			</view>
			<view class="qiun-charts">
				<canvas :canvas-id="'canvasLine'+index" :id="'canvasLine'+index" class="charts" @touchstart="touchLineA($event,'canvasLine'+index)"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		hasValue
	} from '@/static/js/formUtil.js';
	import uCharts from '@/components/u-charts/u-charts/u-charts.js';
	var _self;
	var canvaLine = {};
	export default {
		data() {
			return {
				cWidth:'',
				cHeight:'',
				pixelRatio:1,
				dataList:[],
				scrollTop:0
			}
		},
		onLoad(options) {
			if(options.dataList){//其他查询参数
				var json = JSON.parse(options.dataList);
				for(var j in json){
					if(hasValue(json[j])){
						this.dataList[j] = json[j];
					}
				}
				
			}else{
				this.om.toast('没有传递数据')
			}
			_self = this;
			this.cWidth=uni.upx2px(750);
			this.cHeight=uni.upx2px(500);
			this.getDataList()
		// 	this.getServerData();
		 },
		 onPageScroll(e){
		 	if(e.scrollTop > 150){
		 		this.scrollTop = e.scrollTop
		 	}else{
				this.scrollTop = 0
			}
		 },
		methods: {
			goBack(){
				uni.navigateBack({
				})
			},
			getDataList(){
				let Line = {}
				for(let index in this.dataList){
					Line[''+index] = {categories:[],series:[]};
					Line[''+index].categories=this.dataList[index].categories;
					Line[''+index].series=this.dataList[index].series
					_self.showLineA("canvasLine"+index,Line[''+index]);
				}
			},
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let LineA={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						LineA.categories=res.data.data.LineA.categories;
						LineA.series=res.data.data.LineA.series;
						_self.showLineA("canvasLineA",LineA);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			showLineA(canvasId,chartData){
				let max = 0
				canvaLine[canvasId] = new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show:true},
					dataLabel:false,
					dataPointShape:true,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type:'grid',
						gridColor:'#CCCCCC',
						gridType:'dash',
						dashLength:8
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						dashLength:8,
						splitNumber:5,
						min:0,
						max:0,
						format:(val)=>{return val.toFixed(0)}
					},
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						line:{
							type: 'straight'
						}
					}
				});
				
			},
			touchLineA(e,id) {
				canvaLine[id].showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + item.name + ':' + item.data 
					}
				});
			}
		}
	}
</script>

<style>
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>